<template>
  <div class="popularity_cotainer">
      <!-- 跳转人气推荐 -->
      <div class="popularity_top">人气推荐</div>
      <!-- 推荐列表 -->
      <div class="popularity_list">
          <!-- 列表商品 -->
          <div class="popularity_list_item" v-for="(item,index) in getPopularList" :key="index" @click="goPopularity(item.id)">
              <!-- 上图下文布局 -->
              <div class="popularity_list_item_img">
                  <img :src="item.pic" alt="">
              </div>
              <div class="popularity_list_item_desc">
                  <div class="popularity_list_item_desc_title">{{item.name}}</div>
                  <div class="popularity_list_item_desc_text">{{item.recommendStatusStr}}</div>
                  <div class="popularity_list_item_desc_price">￥{{item.weight}}</div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import PATH from "../../router/constant"
export default {
    data(){
        return{
            getPopularList:[]
        }
    },
    mounted(){
       this.$CLIENT.getPopular().then(res=>{
            this.getPopularList = res.data.data.goodsMap
       }).catch((error)=>{
            console.log(error)
       })
    },
    methods:{
        goPopularity(id){
            this.$router.goNext({path:PATH.PAPULARBAR,query:{id}})
        }
    }
}
</script>

<style scoped>
.popularity_top
{
    width: 100%;
    height: 45px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    background-color: #fff;
    color: #666;
}

.popularity_list
{
    width: 100%;
    /* border: 1px solid #000; */
    padding: 5px;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: space-between;
    /* flex-direction: column; */
    align-items: center;
    flex-wrap: wrap;
    background-color: #fff;
}

.popularity_list_item
{
    width: 49%;
    height: 270px;
    margin-top: 5px;
    display: inline-flex;
    flex-direction: column;
    /* background-color: #ddd; */
    /* border: 1px solid #000; */
}

.popularity_list_item_img
{
    width: 100%;
    height: 80%;
}

.popularity_list_item_img img
{
    width: 100%;
    height: 100%;
}

.popularity_list_item_desc
{
    width: 100%;
    height: 20%;
    display: inline-flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: flex-start;
    padding: 0 10px;
    box-sizing: border-box;
}

.popularity_list_item_desc_title
{
    flex: 1;
    font-size: 13px;
    display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.popularity_list_item_desc_text
{
    flex: 1;
    font-size: 10px;
    color: gray;
    margin: 3px;
    display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.popularity_list_item_desc_price
{
    flex: 1;
    font-size: 12px;
    color: red;
}
</style>